<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="Persono" />
  <meta name="author" content="Frenify" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Template</title>
  <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet" />
  <link type="text/css" rel="stylesheet" href="css/base.css?ver=5" />
  <link type="text/css" rel="stylesheet" href="css/swiper.css?ver=5" />
  <link type="text/css" rel="stylesheet" href="css/style.css?ver=5" />
</head>
<body>
<div class="persono_fn_wrapper">
  <div class="persono_fn_mobilemenu">
    <div class="logo_hamb">
      <div class="in">
        <div class="menu_logo">
          <a href="index.html">
            <img src="img/logo-mobile.png" alt="" /></a>
        </div>
        <div class="hamburger hamburger--collapse-r">
          <div class="hamburger-box">
            <div class="hamburger-inner"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="mobilemenu">
      <ul>
        <li><a href="index.html">首页 </a></li>
        <li><a href="#about">关于</a></li>
        <li><a href="#portfolio">组合</a></li>
        <li><a href="#contact">联系方式</a></li>
      </ul>
    </div>
  </div>

  <div class="persono_popup">
    <div class="extra_img"></div>
    <div class="stopper"></div>
    <div class="fn__closer"></div>
    <div class="container">
      <div class="content">
        <div class="popup_in"></div>
        <div class="popup_nav">
          <div class="prev_post post_nav">
            <input type="hidden" />
            <span>Prev</span>
            <a href="#"></a>
          </div>
          <div class="go_home" title="Home">
            <a href="index.html"></a>
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="persono_fn_sidebar" data-max="500" data-min="250">
    <span class="nav__button">
      <span class="nav_trigger" data-open="Open" data-close="Close">Close</span>
      <span class="width_indicator"></span>
    </span>
    <div class="shifter_wrapper">
      <div class="shifter">
        <ul>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
          <li><span></span></li>
        </ul>
      </div>
    </div>
    <div class="sidebar_in">
      <div class="logo">
        <a href="index.html"><img src="img/logo.png" alt="" /><span></span></a>
      </div>
      <div class="navigation">
        <ul class="ready">
          <li><a href="index.html">首页</a></li>
          <li><a href="#about">关于</a></li>
          <li><a href="#portfolio">组合</a></li>
          <li><a href="#contact">联系方式</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="persono_fn_content">
    <div class="persono_fn_page">
      <section id="home">
        <div class="main_slider">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide ">
                  <div class="item">
                    <div class="img_holder" data-image="1.jpg"></div>
                     <div class="title_holder">
                       <h3><span class="word"><span class="char">原创性失败胜于模仿成功。</span></span></h3>
                     </div>
                  </div>
              </div>
              <div class="swiper-slide ">
                <div class="item">
                  <div class="img_holder" data-image="2.jpg"></div>
                  <div class="title_holder">
                    <h3>设定目标是一个引人注目的未来的秘诀</h3>
                  </div>
                </div>
              </div>
              <div class="swiper-slide ">
                <div class="item">
                  <div class="img_holder" data-image="3.jpg"></div>
                  <div class="title_holder">
                    <h3><span class="word"><span class="char">工作直到你的银行账户看起来像一个电话号码</span></span></h3>
                  </div>
                </div>
              </div>
              <div class="swiper-slide ">
                <div class="item">
                  <div class="img_holder" data-image="img/4.jpg"></div>
                  <div class="title_holder">
                    <h3><span class="word"><span class="char">人们说没有什么是不可能的</span></span></h3>
                  </div>
                </div>
              </div>
              <div class="swiper-slide ">
                <div class="item">
                  <div class="img_holder" data-image="5.jpg"></div>
                  <div class="title_holder">
                    <h3><span class="word"><span class="char">独自一人我们能做得那么少，我们可以一起做那么多</span></span></h3>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav__prev">
              <img class="persono_fn_svg" src="img/next.svg" alt="" />
            </div>
            <div class="nav__next">
              <img class="persono_fn_svg" src="img/next.svg" alt="" />
            </div>
          </div>
        </div>
      </section>
      <section id="about">
        <div class="container">
          <div class="section_about">
            <div class="persono_fn_title">
              <div class="title_fixer">
                <h2><span class="animated_text">
                  <span class="text">introduce oneself</span>
                  <span class="line"></span></span></h2>个人介绍
              </div>
            </div>
            <div class="about_content">
              <div class="about_left" id="scene">
                <div class="left_in layer" data-depth="0.1">
                  <ul class="about_us">
                    <li><h5><span class="about_title">Birthday:</span><span>November 13, 2001</span></h5></li>
                    <li><h5><span class="about_title">Age:</span><span>20</span></h5></li>
                    <li><h5><span class="about_title">Address:</span><span>Hezhou, Guangxi, China</span></h5></li>
                    <li><h5><span class="about_title">Email:</span><span>[email&nbsp;protected]</span></h5></li>
                    <li><h5><span class="about_title">Phone:</span><span><a href="tel:+123456789012">+12 345 678 90 12</a></span></h5></li>
                    <li><h5><span class="about_title">School:</span><span>Beihai vocational college</span></h5></li>
                  </ul>
                </div>
                <div class="about_mover layer" data-depth="0.2"></div>
              </div>
              <div class="about_right">
                <div class="about_me">
                  <p>你好，我是苏菲，是一名学生，来自广西贺州，现就读于北海职业学院，专业为物联网应用技术。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="portfolio">
        <div class="container">
          <div class="section_portfolio">
            <div class="persono_fn_title">
              <div class="title_fixer">
                <h2><span class="animated_text"><span class="text">
                </span><span class="line"></span></span></h2>精选图片
              </div>
            </div>
            <div class="portfolio_footer">
              <div class="portfolio_filter">
                <ul>
                  <li><a href="#" class="current" data-filter="*">所有图片</a></li>
                  <li><a href="#" data-filter=".filter__illustrator">插画</a></li>
                  <li><a href="#" data-filter=".filter__typography">排版</a></li>
                  <li><a href="#" data-filter=".filter__visual">视觉化</a></li>
                </ul>
              </div>
              <div class="portfolio_list">
                <ul class="list">
                  <li class="list_item filter__brands filter__typography">
                    <div class="item">
                      <input class="index" type="hidden" value="1" />
                      <div class="gallery_img" data-image="img/1-1.jpg"></div>
                      <img src="pic3949.jpg" alt="" />
                      <div class="gallery_text">
                        <span class="gallery_title">排版</span>
                        <span class="fn__title">月亮</span>
                      </div>
                      <div class="hidden_info">
                        <div class="top_part">
                          <img src="1.jpg" alt="" />
                        </div>
                        <div class="title_holder">
                          <h4 class="subtitle">项目信息</h4>
                          <h3 class="title">月亮</h3>
                        </div>

                        <div class="img_list">
                          <ul>
                            <li>
                              <div class="img_item">
                                <img src="img/2-1.jpg" alt="" />
                                <div class="abs_img" data-image="2.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="3.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="img/portfolio/4.jpg"></div>
                              </div></li>
                          </ul>
                        </div>
                      </div>
                    </div></li>
                  <li class="list_item filter__typography filter__illustrator">
                    <div class="item">
                      <input class="index" type="hidden" value="2" />
                      <div class="gallery_img" data-image="2.jpg"></div>
                      <img src="img/1-1.jpg" alt="" />
                      <div class="gallery_text">
                        <span class="gallery_title">排版、插图</span>
                        <span class="fn__title">空河</span>
                      </div>
                      <div class="hidden_info">
                        <div class="top_part">
                          <img src="2.jpg" alt="" />
                        </div>
                        <div class="title_holder">
                          <h4 class="subtitle">项目信息</h4>
                          <h3 class="title">空河</h3>
                        </div>

                        <div class="img_list">
                          <ul>
                            <li>
                              <div class="img_item">
                                <img src="img/2-1.jpg" alt="" />
                                <div class="abs_img" data-image="3.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="4.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="5.jpg"></div>
                              </div></li>
                          </ul>
                        </div>
                      </div>
                    </div></li>
                  <li class="list_item filter__visual filter__brands">
                    <div class="item">
                      <input class="index" type="hidden" value="3" />
                      <div class="gallery_img" data-image="3.jpg"></div>
                      <img src="img/1-1.jpg" alt="" />
                      <div class="gallery_text">
                        <span class="gallery_title">视觉</span>
                        <span class="fn__title">灵魂之火</span>
                      </div>
                      <div class="hidden_info">
                        <div class="top_part">
                          <img src="3.jpg" alt="" />
                        </div>
                        <div class="title_holder">
                          <h4 class="subtitle">项目信息</h4>
                          <h3 class="title">灵魂之火</h3>
                        </div>

                        <div class="img_list">
                          <ul>
                            <li>
                              <div class="img_item">
                                <img src="img/2-1.jpg" alt="" />
                                <div class="abs_img" data-image="4.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="5.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="6.jpg"></div>
                              </div></li>
                          </ul>
                        </div>
                      </div>
                    </div></li>
                  <li class="list_item filter__typography filter__illustrator">
                    <div class="item">
                      <input class="index" type="hidden" value="4" />
                      <div class="gallery_img" data-image="img/portfolio/4.jpg"></div>
                      <img src="img/1-1.jpg" alt="" />
                      <div class="gallery_text">
                        <span class="gallery_title">排版, 插图</span>
                        <span class="fn__title">猎人之塔</span>
                      </div>
                      <div class="hidden_info">
                        <div class="top_part">
                          <img src="4.jpg" alt="" />
                        </div>
                        <div class="title_holder">
                          <h4 class="subtitle">项目信息</h4>
                          <h3 class="title">猎人之塔</h3>
                        </div>

                        <div class="img_list">
                          <ul>
                            <li>
                              <div class="img_item">
                                <img src="img/2-1.jpg" alt="" />
                                <div class="abs_img" data-image="5.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="6.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="1.jpg"></div>
                              </div></li>
                          </ul>
                        </div>
                      </div>
                    </div></li>
                  <li class="list_item filter__visual filter__typography">
                    <div class="item">
                      <input class="index" type="hidden" value="5" />
                      <div class="gallery_img" data-image="img/portfolio/5.jpg"></div>
                      <img src="img/1-1.jpg" alt="" />
                      <div class="gallery_text">
                        <span class="gallery_title">视觉、排版</span>
                        <span class="fn__title">山谷之路</span>
                      </div>
                      <div class="hidden_info">
                        <div class="top_part">
                          <img src="5.jpg" alt="" />
                        </div>
                        <div class="title_holder">
                          <h4 class="subtitle">项目信息</h4>
                          <h3 class="title">山谷之路</h3>
                        </div>
                        <div class="img_list">
                          <ul>
                            <li>
                              <div class="img_item">
                                <img src="img/2-1.jpg" alt="" />
                                <div class="abs_img" data-image="6.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="1.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="2.jpg"></div>
                              </div></li>
                          </ul>
                        </div>
                      </div>
                    </div></li>
                  <li class="list_item filter__brands filter__visual">
                    <div class="item">
                      <input class="index" type="hidden" value="6" />
                      <div class="gallery_img" data-image="img/portfolio/6.jpg"></div>
                      <img src="img/1-1.jpg" alt="" />
                      <div class="gallery_text">
                        <span class="gallery_title">视觉</span>
                        <span class="fn__title">硬心</span>
                      </div>
                      <div class="hidden_info">
                        <div class="top_part">
                          <img src="6.jpg" alt="" />
                        </div>
                        <div class="title_holder">
                          <h4 class="subtitle">项目信息</h4>
                          <h3 class="title">硬心</h3>
                        </div>

                        <div class="img_list">
                          <ul>
                            <li>
                              <div class="img_item">
                                <img src="img/2-1.jpg" alt="" />
                                <div class="abs_img" data-image="1.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="2.jpg"></div>
                              </div></li>
                            <li>
                              <div class="img_item">
                                <img src="img/59-44.jpg" alt="" />
                                <div class="abs_img" data-image="3.jpg"></div>
                              </div></li>
                          </ul>
                        </div>
                      </div>
                    </div></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="contact">
        <div class="container">
          <div class="section_contact">
            <div class="persono_fn_title">
              <div class="title_fixer">
                <h2><span class="animated_text"><span class="text">Get In Touch</span><span class="line"></span></span></h2>联系方式
              </div>
            </div>
            <div class="contact_footer">
              <div class="contact_footer_form">
                <form class="contact_form" action="/" method="post" autocomplete="off" data-email="youremail@gmail.com">
                  <div class="success" data-success="Your message has been received, we will contact you soon."></div>
                  <div class="empty_notice">
                    <span>Please Fill Required Fields</span>
                  </div>
                  <ul>
                    <li class="half"><input class="name" type="text" placeholder="Name *" /></li>
                    <li class="half"><input class="email" type="email" placeholder="Email *" /></li>
                    <li><input class="tel" type="tel" placeholder="Phone" /></li>
                    <li><textarea class="message" placeholder="Message"></textarea></li>
                    <li><input class="submit" type="submit" value="Send Message" /></li>
                  </ul>
                </form>
              </div>
              <div class="contact_footer_address">
                <div class="address_header">
                  <p>Address</p>
                  <h4>Beihai, Guangxi,</h4>
                </div>
                <div class="address_middle">
                  <p>Phone</p>
                  <h4><a href="tel:+1234567890">(+123)456-7890</a></h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

</body>
</html>